<template>
  <div class="app-container home">
      <div class="box">
        <div class="title-box">
          <img src="../assets/images/icon_16_title-r.png" alt="">今年项目概览
        </div>
        <div class="content-box">
           <div :class="['content '+ 'box'+index]" v-for="(item,index) in titleArr">
             <div class="title-content">
               {{titleData[item.value]}}
             </div>
             <div class="text-contnent">
               {{item.label}}
             </div>
             <div class="triangle">
             </div>
           </div>
        </div>
      </div>
      <div class="box">
        <div class="title-box">
          <img src="../assets/images/icon_16_title-r.png" alt="">投资估算概览
        </div>
        <div class="content-box">
           <div :class="['content '+ 'box'+index]" v-for="(item,index) in titleArr1">
             <div class="title-content">
               {{titleData[item.value]}}
             </div>
             <div class="text-contnent">
               {{item.label}}
             </div>
             <div class="triangle">
             </div>
           </div>
        </div>
      </div>
      <div class="table-box">
        <div class="left-table">
          <div class="title-box">
            <div><img src="../assets/images/icon_16_title-r.png" alt="">待办事项</div>
          </div>
            <el-table
                :data="tableData"
                v-loading="loading"
                empty-text="暂无数据"
                :max-height="450"
                style="width: 100%">
                <el-table-column
                  v-for="(item,index) in tableColumn"
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                >
                </el-table-column>
                <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.proId)" type="text" size="small">查看详情</el-button>
                    
                </template>
                </el-table-column>
            </el-table>

        </div>
        <div class="right-table">
          <div class="title-box">
            <div><img src="../assets/images/icon_16_title-r.png" alt="">我的消息</div>
            <div class="view-more" @click="()=> this.$router.push('/message')">查看更多</div>
          </div>
          <el-table
              :data="tableData1"
              v-loading="loading"
              empty-text="暂无数据"
              :max-height="450"
              style="width: 100%">
              <el-table-column
                v-for="(item,index) in tableColumn1"
                :key="index"
                :label="item.label"
                :prop="item.prop"
              >
              </el-table-column>
          </el-table>
        </div>
      </div>
  </div>
</template>

<script>
import {getMessageList,getMattersList,getMessage} from '../api/manage/messsage'
export default {
  name: "index",
  data() {
    return {
      titleArr:[
        {
          label:'正在申报 (个)',value:'applicationNum',listType:0
        },
        {
          label:'正在实施 (个)',value:'implementNum',listType:1
        },
        {
          label:'验收备案 (个)',value:'preliminaryInspectionNum',listType:2
        },
        {
          label:'建设类项目 (个)',value:'constructionNum',listType:3
        },
        {
          label:'购买服务类 (个)',value:'buyAndServiceNum',listType:4
        },
        {
          label:'运维类项目 (个)',value:'operationAndMaintenanceNum',listType:4
        },
      ],
      titleArr1:[
        {
          label:'正在申报 (个)',value:'applicationReckon',listType:0
        },
        {
          label:'正在实施 (个)',value:'implementReckon',listType:1
        },
        {
          label:'验收备案 (个)',value:'preliminaryInspectionReckon',listType:2
        },
        {
          label:'建设类项目 (个)',value:'constructionReckon',listType:3
        },
        {
          label:'购买服务类 (个)',value:'buyAndServiceReckon',listType:4
        },
        {
          label:'运维类项目 (个)',value:'operationAndMaintenanceReckon',listType:4
        },
      ],
      tableData:[

      ],
      tableData1:[],

      loading:false,
      tableColumn:[
        {label:'类型',prop:'node'},
        {label:'名称',prop:'nodeName'},
        {label:'时间',prop:'updateTime'},
      ],
      tableColumn1:[
        {label:'类型',prop:'noticeType'},
        {label:'名称',prop:'noticeTitle'},
        {label:'时间',prop:'createTime'},
      ],
      titleData:{},
      queryParams:{
        pageSize:10,
        pageNum:1
      }
    };
  },
  methods: {
    getList(){
      getMessageList().then(res =>{
         if(res.code==200){
           this.titleData=res.data
         }
      })
    },
    getMatters(){
      getMattersList(this.queryParams).then(res =>{
        console.log(res)
        if(res.code==200){
          this.tableData=res.data
        }
      })
      getMessage(this.queryParams).then(res => {
        if(res.code==200){
          this.tableData1=res.data
        }
      })
    }
  },
  created(){
     this.getList()
     this.getMatters()
  }
};
</script>

<style scoped lang="scss">
.home {
  background: #f5f5f5;
  padding:16px;
  .box{
    width: 1648px;
    height: 183px;
    background: #ffffff;
    border-radius: 8px;
    padding:24px;
    margin:0 auto 16px;
    .title-box{
      display: flex;
      align-items: center;
    }
    .content-box{
      margin-top:24px;
      display: flex;
      .content{
        width: 197px;
        height: 86px;
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        margin-right:77px;
        position:relative;

        .title-content{
          margin:15px 0 8px;
          font-size: 24px;
          font-family: DIN Alternate, DIN Alternate-Bold;
          font-weight: 700;
          height:28px;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;

        }
        .triangle{
          width: 0;
          height: 0;
          border-right: 10px solid transparent;
          position:absolute;
          top:2px;
          left:2.5px;
        }
      }
      .box0{
        background: rgba(61,96,222,0.04);
        border: 0.5px solid #3d60de;
        color: #3d60de;
        .triangle{
          border-top: 10px solid #3d60de;
        }
      }
      .box1{
        background: #f7fafe;
        border: 0.5px solid #2e81ef;
        color: #2e81ef;
        .triangle{
          border-top: 10px solid #2e81ef;
        }
      }
      .box2{
        background: rgba(40,183,215,0.04);
        border: 0.5px solid #28b7d7;
        color: #28b7d7;
        .triangle{
          border-top: 10px solid #28b7d7;
        }
      }
      .box3{
        ground: rgba(51,168,61,0.04);
        border: 0.5px solid #33a83d;
        color: #33a83d;
        .triangle{
          border-top: 10px solid #33a83d;
        }
      }
      .box4{
        background: rgba(223,32,66,0.04);
        border: 0.5px solid #df2042;
        color: #df2042;
        .triangle{
          border-top: 10px solid #df2042;
        }
      }
      .box5{
        background: rgba(223,130,45,0.04);
        border: 0.5px solid #df822d;
        color: #df822d;
        .triangle{
          border-top: 10px solid #df822d;
        }
      }
    }
    
  }
  .table-box{
    display: flex;
    margin: 0 auto;
    width: 1648px;
    justify-content: space-between;
    &>div{
       padding:24px;
      width: 816px;
      height: 536px;
      background: #ffffff;
      border-radius: 8px;
      .title-box{
        display: flex;
        align-items: center; 
        margin-bottom:24px;
        justify-content: space-between;
        align-items: center;
        &>:first-child{
          display: flex;
          align-items: center;
        }
        .view-more{
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #666666;
          cursor: pointer;
        }
      }
    }
  }

}
</style>
<style >
.home .el-table--enable-row-transition .el-table__body td{
  height:40px;
  padding:0;
}
.home .el-table .el-table__header-wrapper th{
   padding:0;
   height:40px;
}
.home   v-deep.el-table__body-wrapper::-webkit-scrollbar {
    width: 0; 
    height: 0; 
  }
</style>
